<template>
	<view>
		<u-navbar title="企业健康体检" :background="{'background':'linear-gradient(180deg,#7571e6,#7571e6)','color':'#fff'}">
		</u-navbar>
		<view class="usertop combg">
			<view class="userimg">
				<image class="avatar" src="@/static/img/logox.png"></image>
				<view class="righttext">
					<view class="title">{{user.name}}</view>
					<view class="datetime">评估时间：{{formatDate(user.createTime)}}</view>
				</view>
			</view>
<!-- 			<view class="detail">
				<view class="detaill">
					<view><text class="gray">企业类型：</text>{{user.enterpriseType}}</view>
				</view>

			</view> -->
			<!-- <view class="detail">
				<view class="detaill">
					<view><text class="gray">企业发展阶段：</text>{{user.enterpriseStage}}</view>
				</view>
			</view>

			<view class="detail">
				<view class="detaill">
					<view><text class="gray">企业成立时间：</text>{{user.enterpriseDate}}</view>
				</view>
			</view>
			<view class="detail">
				<view class="detaill">
					<view><text class="gray">企业规模大小：</text>{{user.enterpriseScale}}</view>
				</view>
			</view> -->
		</view>
		<view class="report combg">
			<view class="listtitle">
				<image class="titlea" src="@/static/titlec.png"></image><text>测评报告</text>
			</view>
			<view class="subtitle">您的报告已生成，有问题可以咨询老师哟</view>
			<view class="charts-box" v-if="chartsDataRadar1">
				<!-- <qiun-data-charts type="radar" :chartData="chartData" background="none" /> -->
				<qiun-data-charts type="radar" :opts="{legend:{position: 'bottom'},extra:{radar:{border:true}}}"
					:chartData="chartsDataRadar1" />
			</view>
			<view style="padding-bottom: 40rpx;">
				<!-- <view class="grid col-2">
					<view v-for="(item,index) in newwendadefen" style="display: flex;font-size: 24rpx;">
						<view class="text-bold" style="">{{item.name}}</view>
						<view class="text-bold text-yellow" style="margin-left: 30rpx;">{{getdengjifen(item)}}</view>
					</view>
				</view> -->
				<u-collapse>
					<u-collapse-item v-for="(item, index) in newwendadefen" :key="index">
						<template slot="title">
							<view class="navtitle">
								<view class="verticalline"></view>
								<text>{{item.name}}</text>

								<text class="state" :style="[{'color':getdengjifencolor(item)}]">
									{{getdengjifen(item)}}
								</text>
							</view>
						</template>
						<view class="rate">
							{{getpngjia(item)}}
						</view>
					</u-collapse-item>
				</u-collapse>
				<view
					style="width: 100%;text-align: center;font-weight: bolder;font-size: 30rpx;padding:20rpx;display: flex;justify-content: center;">
					您的企业健康总分为:{{fenshu}}分

				</view>

				<view
					style="width: 100%;text-align: center;font-weight: bolder;font-size: 32rpx;display: flex;justify-content: center;">
					<view>健康等级:</view>
					<view style="font-size: 36rpx;" :style="[{'color':getcolor()}]">{{getdengji()}}</view>
				</view>
				<view style="padding: 20rpx 0;">{{getAllpingjia()}}</view>
			</view>
			<!-- <u-collapse>
				<u-collapse-item v-for="(item, index) in itemList" :key="index">
					<template slot="title">
						<view class="navtitle">
							<view class="verticalline"></view>
							<text>{{item.head}}</text>
							<text class="state" :class="[`onstate${item.stateno}`]">
								<span>{{item.state}}</span>
							</text>
						</view>
					</template>
					<view class="rate">
						<u-rate :count="count" v-model="item.value" active-color="rgb(254, 189, 0)"></u-rate>
						{{item.value}}分
					</view>
					<u-parse :html="item.body"></u-parse>

				</u-collapse-item>
			</u-collapse> -->
		</view>
		<!-- <view class="organization combg">
			<view class="organizationtitle">
				<image src="@/static/organ.png"></image>
				<text>测评机构</text>
			</view>
			<view class="savebutton" @click="restart">重新评测</view>
		</view> -->
	</view>
</template>

<script>
	import {
		report
	} from './report'
	import {
		http,
		Method
	} from "@/utils/request.js";
	import storage from "@/utils/storage.js";
	import moment from 'dayjs';
	import qiunDataCharts from '../qiun-data-charts/qiun-data-charts/qiun-data-charts.vue'
	export default {
		name:"report",
		components: {
			qiunDataCharts
		},
		props:{
			wqid:{
				type:Number,
				default:0
			}
		},
		created: function() {
			var aDate = new Date();
			this.date = aDate.getFullYear() + "年" + (aDate.getMonth() + 1) + "月" + aDate.getDate() + "日";
			if(this.wqid){
				this.detailId = this.wqid
				this.getMlaform();
				
			}
		},
		onLoad: function(option) {
			this.detailId = option.id
			this.getMlaform();
			option = {
				g0: 20,
				g1: 33,
				g2: 13
			}
			this.chartData.series[0].data = [option.g0 * 3, option.g1 * 3, option.g2 * 3];
			switch (true) {
				case option.g0 < 27:
					this.itemList[0].body = report[0].qdata1answer;
					this.itemList[0].state = '正常';
					this.itemList[0].stateno = 0;
					this.itemList[0].value = ((option.g0) / 30).toFixed(2);
					break;
				case option.g0 < 54:
					this.itemList[0].body = report[1].qdata1answer;
					this.itemList[0].state = '边缘';
					this.itemList[0].stateno = 1;
					this.itemList[0].value = ((option.g0) / 30).toFixed(2);
					break;
				case option.g0 < 72:
					this.itemList[0].body = report[2].qdata1answer;
					this.itemList[0].state = '中度';
					this.itemList[0].stateno = 2;
					this.itemList[0].value = ((option.g0) / 30).toFixed(2);
					break;
				default:
					this.itemList[0].body = report[3].qdata1answer;
					this.itemList[0].state = '严重';
					this.itemList[0].stateno = 3;
					this.itemList[0].value = ((option.g0) / 30).toFixed(2);
					break;
			}

			switch (true) {
				case option.g1 < 27:
					this.itemList[1].body = report[0].qdata2answer;
					this.itemList[1].state = '正常';
					this.itemList[1].stateno = 0;
					this.itemList[1].value = ((option.g1) / 30).toFixed(2);
					break;
				case option.g1 < 54:
					this.itemList[1].body = report[1].qdata2answer;
					this.itemList[1].state = '边缘';
					this.itemList[1].stateno = 1;
					this.itemList[1].value = ((option.g1) / 30).toFixed(2);
					break;
				case option.g1 < 72:
					this.itemList[1].body = report[2].qdata2answer;
					this.itemList[1].state = '中度';
					this.itemList[1].stateno = 2;
					this.itemList[1].value = ((option.g1) / 30).toFixed(2);
					break;
				default:
					this.itemList[1].body = report[3].qdata2answer;
					this.itemList[1].state = '严重';
					this.itemList[1].stateno = 3;
					this.itemList[1].value = ((option.g1) / 30).toFixed(2);
					break;
			}

			switch (true) {
				case option.g2 < 24:
					this.itemList[2].body = report[0].qdata3answer;
					this.itemList[2].state = '正常';
					this.itemList[2].stateno = 0;
					this.itemList[2].value = ((option.g2) / 30).toFixed(2);
					break;
				case option.g2 < 48:
					this.itemList[2].body = report[1].qdata3answer;
					this.itemList[2].state = '边缘';
					this.itemList[2].stateno = 1;
					this.itemList[2].value = ((option.g2) / 30).toFixed(2);
					break;
				case option.g2 < 64:
					this.itemList[2].body = report[2].qdata3answer;
					this.itemList[2].state = '中度';
					this.itemList[2].stateno = 2;
					this.itemList[2].value = ((option.g2) / 30).toFixed(2);
					break;
				default:
					this.itemList[2].body = report[3].qdata3answer;
					this.itemList[2].state = '严重';
					this.itemList[2].stateno = 3;
					this.itemList[2].value = ((option.g2) / 30).toFixed(2);
					break;
			}
		},
		data() {
			return {
				newwendadefen: [],
				detailId: 0,
				chartsDataRadar1: null,
				// chartsDataRadar1: {
				// 	"categories": ["外部环境", "组织建设", "科学管理", "财税健康", "高效运营"],
				// 	"series": [{
				// 		"name": "企业健康",
				// 		"data": [90, 110, 165, 195, 187]
				// 	}]
				// },
				fenshu: 0,
				user: {
					name: '',
					sex: '',
					age: '',
					tel: ''
				},
				date: '',
				count: 3,
				itemList: [{
					head: "一.注意力不集中",
					body: '',
					value: 0,
					state: '',
					stateno: '',
					open: false
				}, {
					head: "二.多动-冲动",
					body: '',
					value: 0,
					state: '',
					stateno: '',
					open: false,
				}, {
					head: "三.对立违抗",
					body: '',
					value: 0,
					state: '',
					stateno: '',
					open: false,
				}],
				chartData: {
					categories: [
						"注意力不集中",
						"多动-冲动",
						"对立违抗"
					],
					series: [{
						name: "测评结果分析",
						data: []
					}]
				}
			}
		},
		methods: {
			getAllpingjia() {
				let qingjiaarr = [];
				let newwendadefen = this.newwendadefen;
				newwendadefen.forEach(item => {
					let pj = this.getpngjia(item);
					qingjiaarr.push(pj)
				});
				return qingjiaarr.join("  ")
			},
			formatDate(long) {
				return moment(long).format("YYYY-MM-DD HH:mm")
			},
			getdengjifencolor(item) {
				let fenshu = item.defen;
				if (item.name == "外部环境") {
					if (fenshu >= 0 && fenshu < 6) {
						return "#fa3534"
					} else if (fenshu >= 6 && fenshu < 7.5) {
						return "#ff9900"
					} else if (fenshu >= 7.5 && fenshu < 9) {
						return "#2979ff"
					} else if (fenshu >= 9 && fenshu <= 10) {
						return "#19be6b"
					}
				} else if (item.name == "组织建设") {
					if (fenshu >= 0 && fenshu < 12) {
						return "#fa3534"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "#ff9900"
					} else if (fenshu >= 15 && fenshu < 18) {
						return "#2979ff"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "#19be6b"
					}
				} else if (item.name == "科学管理") {
					if (fenshu >= 0 && fenshu < 12) {
						return "#fa3534"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "#ff9900"
					} else if (fenshu >= 15 && fenshu < 18) {
						return "#2979ff"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "#19be6b"
					}
				} else if (item.name == "财税健康评估") {
					if (fenshu >= 0 && fenshu < 18) {
						return "#fa3534"
					} else if (fenshu >= 18 && fenshu < 22.5) {
						return "#ff9900"
					} else if (fenshu >= 22.5 && fenshu < 27) {
						return "#2979ff"
					} else if (fenshu >= 27 && fenshu <= 30) {
						return "#19be6b"
					}
				} else if (item.name == "高效运营") {
					if (fenshu >= 0 && fenshu < 12) {
						return "#fa3534"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "#ff9900"
					} else if (fenshu >= 15 && fenshu < 18) {
						return "#2979ff"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "#19be6b"
					}
				}
			},
			getpngjia(item) {
				console.log("getdengjifen")
				let fenshu = item.defen;
				if (item.name == "外部环境") {
					if (fenshu >= 0 && fenshu < 6) {
						return "企业外部环境较差，不利于组织业务的开展。"
					} else if (fenshu >= 6 && fenshu < 7.5) {
						return "企业外部环境一般，可正常开展组织业务。"
					} else if (fenshu >= 7.5 && fenshu < 9) {
						return "企业外部环境较好，有利于企业开展组织业务。"
					} else if (fenshu >= 9 && fenshu <= 10) {
						return "企业外部环境极好，拥有良好发展前景与机遇。"
					}
				} else if (item.name == "组织建设") {
					if (fenshu >= 0 && fenshu < 12) {
						return "企业组织建设较差，组织结构设计不合理，员工对组织文化认同度不高，工作效率和满意度低下。"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "企业组织建设一般，虽拥有完整的员工培养、激励制度，但效果一般，员工整体满意度一般。"
					} else if (fenshu >= 15 && fenshu < 18) {
						return "企业组织建设较好，拥有较完善的员工培养、激励制度，组织架构与组织效率存在进一步提高空间。"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "企业组织建设优秀，组织结构完善合理，拥有完善的员工培养、激励等制度，员工满意度高。"
					}
				} else if (item.name == "科学管理") {
					if (fenshu >= 0 && fenshu < 12) {
						return "企业管理水平差或管理无序，缺乏有效管理机制，管理者应科学制定战略，提高管理观念。"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "企业科学管理水平一般，企业战略或目标制定存在一定偏离，管理决策效率仍可进一步提高。 "
					} else if (fenshu >= 15 && fenshu < 18) {
						return "企业科学管理水平较高，可进一步优化管理机制，明确权责界定，提高业务活动运营规范。"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "企业科学管理水平优秀，管理结构完善，能根据企业内外部环境科学制定发展战略。"
					}
				} else if (item.name == "财税健康评估") {
					if (fenshu >= 0 && fenshu < 18) {
						return "企业财税表现较差，出现经营困难、资金周转压力大等问题，应着力加强财税内控管理机制。"
					} else if (fenshu >= 18 && fenshu < 22.5) {
						return "企业财税表现一般，企业成长与盈利能力存在较大进步空间，存在一定经营压力或资金压力。"
					} else if (fenshu >= 22.5 && fenshu < 27) {
						return "企业财税表现较健康，企业各方面业务稳步推进，日常经营与盈利稳定，按规定进行税务活动。"
					} else if (fenshu >= 27 && fenshu <= 30) {
						return "企业财税表现健康，经营能力和成长能力较好，拥有良好偿债能力，未出现财税风险点。"
					}
				} else if (item.name == "高效运营") {
					if (fenshu >= 0 && fenshu < 12) {
						return "企业运营效率低，存在资源浪费或低效活动，客户响应速度不高，产品或服务认可性也有待加强。"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "企业运营效率一般，日常运营基本能够满足客户的需求，业务流程与分工协作能力可进一步提高。"
					} else if (fenshu >= 15 && fenshu < 18) {
						return "企业运营效率较高，各方面资源配置合理，企业运营平稳，产品或服务客户满意度较高。"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "企业运营效率高， 合理高效利用企业资源，高效进行业务分工协作，产品或服务得到用户认可。"
					}
				}
			},
			getdengjifen(item) {
				console.log("getdengjifen")
				let fenshu = item.defen;
				if (item.name == "外部环境") {
					if (fenshu >= 0 && fenshu < 6) {
						return "较差"
					} else if (fenshu >= 6 && fenshu < 7.5) {
						return "合格"
					} else if (fenshu >= 7.5 && fenshu < 9) {
						return "良好"
					} else if (fenshu >= 9 && fenshu <= 10) {
						return "优秀"
					}
				} else if (item.name == "组织建设") {
					if (fenshu >= 0 && fenshu < 12) {
						return "较差"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "合格"
					} else if (fenshu >= 15 && fenshu < 18) {
						return "良好"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "优秀"
					}
				} else if (item.name == "科学管理") {
					if (fenshu >= 0 && fenshu < 12) {
						return "较差"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "合格"
					} else if (fenshu >= 15 && fenshu < 18) {
						return "良好"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "优秀"
					}
				} else if (item.name == "财税健康评估") {
					if (fenshu >= 0 && fenshu < 18) {
						return "较差"
					} else if (fenshu >= 18 && fenshu < 22.5) {
						return "合格"
					} else if (fenshu >= 22.5 && fenshu < 27) {
						return "良好"
					} else if (fenshu >= 27 && fenshu <= 30) {
						return "优秀"
					}
				} else if (item.name == "高效运营") {
					if (fenshu >= 0 && fenshu < 12) {
						return "较差"
					} else if (fenshu >= 12 && fenshu < 15) {
						return "合格"
					} else if (fenshu >= 15 && fenshu < 18) {
						return "良好"
					} else if (fenshu >= 18 && fenshu <= 20) {
						return "优秀"
					}
				}
			},
			getcolor() {
				let fenshu = this.fenshu;
				if (fenshu >= 0 && fenshu < 60) {
					return "#fa3534"
				} else if (fenshu >= 60 && fenshu < 75) {
					return "#ff9900"
				} else if (fenshu >= 75 && fenshu < 90) {
					return "#2979ff"
				} else if (fenshu >= 90 && fenshu <= 100) {
					return "#19be6b"
				}
			},
			getdengji() {
				let fenshu = this.fenshu;
				if (fenshu >= 0 && fenshu < 60) {
					return "较差"
				} else if (fenshu >= 60 && fenshu < 75) {
					return "合格"
				} else if (fenshu >= 75 && fenshu < 90) {
					return "良好"
				} else if (fenshu >= 90 && fenshu <= 100) {
					return "优秀"
				}
			},
			async getMlaform() {
				// this.user = uni.getStorageSync("mlaform");
				let detailId = this.detailId;
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let res = await http.request({
					url: "lili/questionnaire/byid/" + detailId,
					method: Method.GET,
					needToken: false,
				});
				uni.hideLoading()
				let data = res.data.result || {};
				this.user = data;
				this.fenshu = data.score;
				let weidufen = JSON.parse(data.weidufen);
				// chartsDataRadar1: {
				// 	"categories": ["外部环境", "组织建设", "科学管理", "财税健康", "高效运营"],
				// 	"series": [{
				// 		"name": "企业健康",
				// 		"data": [90, 110, 165, 195, 187]
				// 	}]
				// },
				let categories = [];
				let datanum = []
				let newwendadefen = []
				weidufen.forEach(item => {
					for (let i in item) {
						let ii = i.replace("（服务业）", "");
						ii = ii.replace("（制造业）", "")
						categories.push(ii);
						datanum.push(item[i] * 200);
						let obj = {
							"name": ii,
							"defen": item[i]
						}
						newwendadefen.push(obj);
					}
				})

				let chartsDataRadar1 = {
					"categories": categories,
					"series": [{
						"name": "企业健康",
						"data": datanum
					}]
				};
				this.newwendadefen = [...newwendadefen];
				console.log("newwendadefen", this.newwendadefen)
				this.chartsDataRadar1 = chartsDataRadar1

			},
			restart() {
				uni.removeStorageSync('mlaform');
				uni.navigateTo({
					url: '/pages/userform/userform'
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	/deep/ .u-collapse .u-icon-wrap {
		display: none;
	}
</style>
<style>
	page {
		/* background-color: #ffc92a; */
		background-color: #7571e6;
		padding-bottom: 40rpx;
	}

	.userimg {
		display: flex;
	}

	.userimg image {
		width: 110rpx;
		height: 110rpx;
	}

	.righttext {
		margin-left: 24rpx;
	}

	.righttext .title {
		font-size: 32rpx;
		color: #594e3f;
		margin-bottom: 28rpx;
	}

	.righttext .datetime {
		color: #857f77;
		font-size: 26rpx;
	}

	.detail {
		padding: 0 20rpx;
		color: #594e3f;
		font-size: 30rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		margin: 30rpx auto;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	}

	.detail .gray {
		color: #857f77;
		margin-right: 10rpx;
	}

	.subtitle {
		font-size: 26rpx;
		color: #c4bfb8;
		margin: 20rpx auto;
	}

	.navtitle {
		width: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		font-size: 15px;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		color: #594e3f;
	}

	.navtitle .verticalline {
		width: 3px;
		height: 14px;
		background: #ffc92a;
		border-radius: 2px;
		margin-right: 7px;
	}

	.navtitle .state {
		/* padding: 0 10px; */
		line-height: 22px;
		/* border-radius: 4px; */
		font-size: 13px;
		/* text-align: center; */
		/* margin-left: 10px; */
		position: absolute;
		right: 0;
		top: 20rpx;
	}

	.navtitle .onstate0 {
		background: #00e315;
	}

	.navtitle .onstate1 {
		background: #ffe902;
	}

	.navtitle .onstate2 {
		background: #ffbc11;
	}

	.navtitle .onstate3 {
		background: #ff6928;
	}

	.rate {
		margin-bottom: 20rpx;
	}

	.reportc .fff {
		color: #FF6928;
		font-weight: bold;
	}

	.charts-box {
		width: 100%;
		height: 400rpx;
	}

	.organization .organizationtitle image {
		width: 32rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.organization .organizationtitle text {
		font-size: 28rpx;
		vertical-align: middle;
		color: #857f77;
	}

	.savebutton {
		width: 622rpx;
		line-height: 90rpx;
		color: #594e3f;
		font-size: 32rpx;
		font-weight: 700;
		margin: 70rpx auto;
		text-align: center;
		background: url(../img/savebtn.png) no-repeat 50%/100%;
	}
</style>
